<template>
    <div class="classShop">
        <div class="fisrtShop">
            <div @click="go1($event)" class="fisrtShopHeader">
                <image class="shopLogo" style="width:140px;height:140px;" src="../../../web/img/logo.png"></image>
                <div class="shopMsg">
                    <div class="title">
                        <text class="shopName">嘟嘟的水果小铺</text>
                        <div class="distance">
                            <image style="width:22px;height:30px;" src="../../../web/img/local.png"></image>
                            <text class="distanceNum"> <179m</text>
                        </div>
                    </div>
                    <text class="littlePath">陕西省西安市雁塔区345号</text>
                    <div class="sellServe">
                        <image style="width:32px;height:30px;" src="../../../web/img/local.png"></image>
                        <text>加油站</text>
                        <image style="width:32px;height:30px;" src="../../../web/img/local.png"></image>
                        <text>汽车美容</text>
                        <image style="width:32px;height:30px;" src="../../../web/img/local.png"></image>
                        <text>汽车保养</text>
                    </div>
                </div>
            </div>
            <div class="fisrtShopSec">
                <div @click="go2($event)" v-for="i in sellServe" class="fisrtShopSec1">
                    <div class="fisrtShopSec1Left">
                        <text class="goodsName">{{i.title}}</text>
                        <text class="sellNum">已售 {{i.num}}</text>
                    </div>
                    <div class="fisrtShopSec1Right">
                        <text class="nowPrice">￥ {{i.nowP}}</text>
                        <text class="oldPrice">原价 ￥{{i.oldP}}</text>
                    </div>
                </div>
            </div>
            <div class="fisrtShopSeeAll">展开全部</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "class-shop",
        data(){
            return{
                sellServe:[
                    {
                        title:"可莱丝汽车精致美容",
                        num:756,
                        nowP:123,
                        oldP:321,
                    },
                    {
                        title:"可莱丝汽车精致美容",
                        num:756,
                        nowP:123,
                        oldP:321,
                    },
                ]
            }
        },
        methods:{
            go1(e){
                // 店铺点击跳店铺页
              this.$router.push("/shop")
            },
            go2(e){
                // 商品点击跳商品（做判断）
                this.$router.push("/goodsServe");
                // this.$router.push("/goodsSell")
            },
        }
    }
</script>

<style scoped>
    .fisrtShop{
        background: #fff;
        margin-bottom:16px;
    }
    .fisrtShopSeeAll{
        line-height: 100px;
        font-size: 32px;
        color:#666;
        text-align: center;
    }
    .nowPrice{
        color:#ea3939;
        font-size: 34px;
        margin-bottom:30px;
    }
    .oldPrice{
        font-size: 26px;
        color:#999;
    }
    .sellNum{
        font-size: 26px;
        color:#999;
    }
    .goodsName{
        font-size: 30px;
        font-weight: 300;
        color:#444;
        margin-bottom:30px;
    }
    .fisrtShopSec .fisrtShopSec1{
        flex-direction: row;
        justify-content: space-between;
        padding:33px 25px;
        border-bottom:1px solid #ccc;
    }
    .fisrtShopSec1Right{

    }
    .fisrtShopHeader{
        flex:1;
        flex-direction: row;
        border-bottom:1px solid #ccc;
        padding-bottom:30px;
    }
    .sellServe p{
        font-size: 26px;
        color:#666;
        line-height: 60px;
        margin-right:28px;
    }
    .sellServe{
        flex-direction: row;
        align-items: center;
    }
    .distanceNum{
        font-size: 28px;
        color:#999;
        font-weight: 300;
    }
    .distance{
        flex-direction: row;
        padding-right:40px;
    }
    .title{
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .shopMsg .title .shopName{
        font-size: 32px;
        font-weight: 600;
        line-height: 66px;
    }
    .shopMsg .littlePath{
        font-size:28px;
        color:#999;
        font-weight: 600;
    }
    .shopLogo{
        border-radius: 50%;
    }
    .shopMsg{
        margin-left:40px;
        flex:1;
    }
.classShop{
    background: #eee;
    margin:0 24px;
    margin-top:30px;
}
</style>